<template>
  <div v-loading="loading">
    <div class="app-main-content-box">
      <app-main-title title="到家商城" />
      <div class="app-main-tips-box">
        <div class="title">
          <i class="el-icon-warning" /> 到家说明
        </div>
        <ul>
          <li>1.到家商城是指可以使用即时配送的商品的专门购买页面，所有在档案中的商品只要支持同城配送都需要通过到家商城完成购买，其中不包含虚拟商品。</li>
          <li>2.当前页面主要配置到家商城售卖商品的商品货架，你可以配置分组和分组内的栏目，用最适合的方式向顾客售卖商品，点击查看示例图。</li>
          <li>3.商品采用统一配置，顾客购买时，只可看见和购买当前门店可销售的商品，你可以在 销售和价格 中配置门店可销售的商品。</li>
        </ul>
      </div>
    </div>

    <!-- 内容 -->
    <div class="content-container app-main-content-box">
      <div class="left">
        <div class="left-title">分组</div>
        <el-button
          type="text"
          size="small"
          round
          icon="el-icon-plus"
          class="add-btn"
          @click="addCategory"
        >新增分组</el-button>
        <div v-if="categoryList&&categoryList.length>0" ref="leftMenu" class="left-menu">
          <el-scrollbar ref style="height:100%" class="hid-scrollbar-x">
            <el-menu :default-active="defaultActiveIndex">
              <el-menu-item
                v-for="(item,index) in categoryList"
                :key="index"
                :index="String(index)"
                @click="getShelf(item,index)"
              >
                <span slot="title">{{ item.title }}</span>
                <div class="edit-btn">
                  <i
                    class="el-icon-edit app-text-color-primary"
                    @click.stop="editCategory(item,index)"
                  />
                  <i
                    class="el-icon-delete app-text-color-danger"
                    @click.stop="delCategory(item,index)"
                  />
                </div>
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </div>
      </div>
      <div class="right">
        <div v-if="categoryList.length===0" class="empty-container">未配置分组~</div>
        <div v-else>
          <el-button size="small" type="primary" round icon="el-icon-plus" @click="addShelf">增加栏目</el-button>
          <div v-if="shelfList.length===0" class="empty-container">未配置栏目~</div>
          <ul v-else class="shelf-list-container">
            <li v-for="(item,index) in shelfList" :key="item.id" class="shelf-container">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="fontWeight:bold;line-height:32px">{{ item.title }}</span>
                  <div style="float: right;">
                    <el-button size="small" type="primary" round @click="editShelf(item)">编辑</el-button>
                    <el-button size="small" type="danger" round @click="delShelf(item,index)">删除</el-button>
                  </div>
                </div>
                <ul v-if="item.type==0&&item.goodsList" ref="shelfGoodsList" class="goods-list">
                  <li
                    v-for="(subItem,subIndex) in item.goodsList"
                    :key="subIndex"
                    class="cell-item"
                  >
                    <!-- v-if="subItem.coverImg&&subIndex<=goodsMaxIndex" -->
                    <img
                      v-if="subItem.coverImg"
                      :src="fileBaseUrl+subItem.coverImg"
                      class="cover-img"
                    >
                  </li>
                  <!-- <li class="cell-item">
                    <div class="count">
                      <span v-if="item.goodsList.length>=goodsMaxIndex+1">...&nbsp;</span>
                      <span>共 {{item.goodsList.length}} 件商品</span>
                    </div>
                  </li>-->
                </ul>
                <ul v-if="item.type==1&&item.categoryList" class="category-list">
                  <li
                    v-for="(subItem,subIndex) in item.categoryList"
                    :key="subItem.id"
                    class="cell-item"
                  >
                    {{ subItem.names.join(" > ") }}
                    <!-- <span
                      v-if="subIndex==item.categoryList.length-1"
                    >&nbsp;&nbsp;共 {{item.categoryList.length}} 个商品分类</span>-->
                  </li>
                </ul>
              </el-card>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 组件 -->
    <DialogGroup ref="dialogGroup" />
    <DialogShelf ref="dialogShelf" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import DialogGroup from './components/DialogGroup'
import DialogShelf from './components/DialogShelf'
import {
  getShelfCategoryList,
  getShelfList,
  updateShelfCategory,
  deleteShelfCategory
} from '@/views/wxaMallModule/api/shelf'
export default {
  components: {
    DialogGroup,
    DialogShelf
  },
  data() {
    return {
      // 配置
      goodsMaxIndex: 4,
      // 状态
      loading: false,
      // 数据
      activeCategory: null,
      defaultActiveIndex: '0',
      filterVal: null,
      categoryList: [],
      shelfList: []
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  created() {},
  mounted() {
    this.getCategory()
  },
  methods: {
    /**
       * 数据组
       */
    // 获取分组
    getCategory(refresh = true, mode = 'edit') {
      this.loading = true
      getShelfCategoryList({ type: 'LOCAL' })
        .then((res) => {
          this.categoryList = res.data || []
          if (!refresh) return
          if (this.categoryList.length > 0) {
            if (mode === 'add') {
              this.getShelf(
                this.categoryList[this.categoryList.length - 1],
                this.categoryList.length - 1
              )
              return
            }
            if (this.activeCategory) {
              const result = this.categoryList.some((v, i) => {
                if (v.id == this.activeCategory.id) {
                  // this.activeCategory = v;
                  this.getShelf(v, i)
                  return true
                }
              })
              if (!result) {
                this.getShelf(this.categoryList[0], 0)
              }
            } else {
              this.getShelf(this.categoryList[0], 0)
            }
          } else {
            this.shelfList = []
          }
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false
        })
    },

    // 获取
    getShelf(item = null, index = 0) {
      this.$nextTick(() => {
        this.defaultActiveIndex = String(index)
      })
      if (item) {
        this.activeCategory = item
      }
      this.loading = true
      getShelfList(this.activeCategory.shelfList)
        .then((res) => {
          this.shelfList = res.data
          // this.$nextTick(() => {
          //   if (
          //     this.$refs.shelfGoodsList &&
          //     this.$refs.shelfGoodsList.length > 0 &&
          //     this.$refs.shelfGoodsList[0].offsetWidth &&
          //     this.$refs.shelfGoodsList[0].offsetWidth > 300
          //   ) {
          //     this.goodsMaxIndex =
          //       Math.floor(this.$refs.shelfGoodsList[0].offsetWidth / 100) -
          //         2 || 5;
          //   }
          // });
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false
        })
    },

    /**
       * 按钮组
       */
    // 新增分组
    addCategory() {
      this.$refs.dialogGroup.open({ mode: 'add' }).then((res) => {
        this.getCategory(true, 'add')
      })
    },

    // 编辑分组
    editCategory(row) {
      this.$refs.dialogGroup.open({ row, mode: 'edit' }).then((res) => {
        this.getCategory(false)
      })
    },

    // 删除分组
    delCategory(item, index) {
      this.$confirm(`您确定要删除${item.title}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      })
        .then(() => {
          deleteShelfCategory({ categoryId: item.id })
            .then((res) => {
              this.getCategory()
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
            })
            .catch((err) => {})
            .finally(() => {})
        })
        .catch((err) => {})
    },

    // 新增货架
    addShelf() {
      this.$refs.dialogShelf
        .open({ mode: 'add', activeCategory: this.activeCategory })
        .then((res) => {
          this.getCategory()
        })
    },

    // 编辑货架
    editShelf(row) {
      this.$refs.dialogShelf
        .open({ mode: 'edit', activeCategory: this.activeCategory, row })
        .then((res) => {
          this.getCategory()
        })
    },

    // 删除货架
    delShelf(item, index) {
      const shelfIndex = this.activeCategory.shelfList.findIndex(
        (v) => v === item.shelfId
      )
      if (index !== -1) {
        this.activeCategory.shelfList.splice(shelfIndex, 1)
        this.loading = true
        updateShelfCategory(this.activeCategory)
          .then((res) => {
            this.getCategory()
          })
          .catch((err) => {
            this.loading = false
          })
          .finally(() => {})
      }
    }
    /**
       * 状态组
       */
    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .content-container {
    margin-top: 10px;
    display: flex;
    padding: 24px 30px 24px 0;
    border-radius: 5px;
    background-color: #fff;
  }
  /* 左 */
  .left {
    flex: 0 0 auto;
    border-right: 1px solid #e7e7e7;
    height: 100%;
    margin-right: 10px;
    padding: 0 10px;
    background-color: #fff;
    &-title {
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-weight: bold;
      border-bottom: 1px solid #e7e7e7;
    }
    &-menu {
      height: calc(100vh - 180px);
    }
    ::v-deep .el-menu {
      border-right: none;
      .el-menu-item {
        padding-right: 70px;
      }
      .el-menu-item:hover .edit-btn {
        display: block;
      }
      .edit-btn {
        display: none;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
  }
  /* 右 */
  .right {
    flex: 1;
    /* 无数据 */
    .empty-container {
      margin-top: 100px;
      text-align: center;
      color: #909399;
      font-size: 14px;
    }
    /* 货架 */
    .shelf-container {
      margin-top: 10px;
    }
    /* 商品列表 */
    .goods-list {
      display: flex;
      flex-wrap: wrap;
      // height: 60px;
      font-size: 14px;
      color: #606266;
      .cell-item {
        .cover-img {
          display: block;
          width: 60px;
          height: 60px;
          margin: 0 10px 10px 0;
        }
        .count {
          display: flex;
          height: 100%;
          align-items: flex-end;
        }
      }
    }
    /*  类目列表 */
    .category-list {
      color: #606266;
      font-size: 14px;
      .cell-item:not(:first-child) {
        margin-top: 10px;
      }
    }
    /* 覆盖样式 */
    ::v-deep {
      .el-card__header {
        padding: 10px 20px;
      }
    }
  }
</style>
